<template>
	<view class="trade">
		<view class="trade__tip">
			更新于：{{date}}</view>
		<view class="trade__head">

			<view>
				<u-image class="trade__money-icon" width="30rpx" height="30rpx" mode="heightFix"
					src="@/static/image/home/img_trade_change.png"></u-image>总交易(元)
			</view>
			<view class="trade__money">{{transAmount}}</view>
		</view>

		<view class="flex trade__content">
			<view class="flex-1 trade__left-tab">

				<view class="trade__tab-item flex" v-for="(item,index) in agentLists" @click="changeTab(index)">

					<view class="trade__tab-item__text">
						{{item.userName}}
					</view>
					<u-icon name="arrow-down-fill" color="#9D60FF" v-show="agentSelect==index"></u-icon>
				</view>
			</view>
			<view class="flex-3 trade__right-content">
				<u-collapse :accordion="false" ref="collapse">
					<u-collapse-item v-for="(item, index) in monthTransList" :key="index" :index="index"
						@change="itemChange">

						<view class="flex-2 flex " slot="title">

							<view class="flex-2">
								{{item.transDate}}
							</view>

							<view class="flex-1">
								￥{{item.transAmount}}
							</view>


						</view>


						<view class="flex justify-between u-margin-top-20 u-margin-bottom-20"
							v-for="(item, index) in item.list" :key="index" id="myCollapse"
							@click="goDetail(item.transDate)">
							<view class="u-border-bottom u-padding-bottom-20">
								{{item.transDate}}
							</view>
							<view class="">
								￥{{item.transAmount}}
							</view>
						</view>
					</u-collapse-item>
				</u-collapse>

			</view>
		</view>
	</view>
</template>

<script>
	// import listItem from "./components/list-item.vue";
	export default {
		components: {


		},
		data() {

			return {
				date: "",
				params: {
					"agentNo": ""
				},
				transAmount: "",
				agentParams: {
					"agentNo": "",
					"transMonth": ""
				},

				agentSelect: 0,
				monthTransList: [],
				monthExpandTransList: [],
				pageNo: 1,
				pageSize: "30",
				agentParam: {},
				agentLists: []
			}
		},
		onLoad() {
			this.date = this.traversalTime(new Date().getTime());
			this.transStat(); //总交易
			this.transStatByDate(-1, 0);
			this.agentList();
		},
		methods: {
			goDetail(transDate) {

				if (this.agentSelect > 0) {
					this.$u.route('packageB/pages/main/trade/tradeQueryList', {
						agentNo: this.agentSelect == 1 ? uni.getStorageSync("agentNo") : this.agentLists[this
							.agentSelect].agentNo,
						date: transDate
					})
				}
			},
			agentList() {
				const _that = this;

				_that.agentLists.push({
					userName: "总交易"
				});
				_that.agentLists.push({
					userName: "直营"
				});

				this.$zx.user_api.agentList(this.pageNo, this.pageSize, this.agentParam).then((data) => {

					console.log("data=" + JSON.stringify(data))

					_that.agentLists = _that.agentLists.concat(data);

				});
			},
			changeTab(index) {
				const _that = this;
				_that.agentSelect = index;
				let agentNo = uni.getStorageSync("agentNo");
				console.log("data=" + agentNo)
				if (index == 0) {
					_that.agentParams.agentNo = "";
					_that.agentParams.transMonth = "";
					_that.params.agentNo = "";

				} else if (index == 1) {
					_that.agentParams.agentNo = agentNo;
					_that.agentParams.transMonth = "";
					_that.params.agentNo = agentNo;
				} else {
					_that.agentParams.agentNo = _that.agentLists[index].agentNo;
					_that.agentParams.transMonth = "";
					_that.params.agentNo = _that.agentLists[index].agentNo;
				}

				this.transStatByDate(-1, 0);

			},
			transStat() {
				this.$zx.order_api.transStat(this.params).then((data) => {

					console.log("data=" + JSON.stringify(data))
					this.transAmount = data.transAmount;
				});
			},
			transStatByDate(index, num) {
				const _that = this;
				_that.$zx.order_api.transStatByDate(this.agentParams).then((data) => {

					console.log("data=" + JSON.stringify(data))

					if (num == 0) {
						_that.monthTransList = data;
						data.forEach(function(item, index, array) {

							_that.agentParams.transMonth = _that.monthTransList[index].transDate;
							_that.transStatByDate(index, 1);

						});

					} else {
						_that.$set(_that.monthTransList[index], "list", data);
						// console.log("data=" + JSON.stringify(_that.monthTransList))
						_that.$nextTick(() => {
							_that.$refs.collapse.init()
						})
					}

				});
			},
			traversalTime(timestamp) {
				//timestamp(时间戳)是整数，否则要parseInt转换
				let time = new Date(timestamp);
				let y = time.getFullYear();
				let m = time.getMonth() + 1;
				let d = time.getDate();
				let h = time.getHours();
				let mm = time.getMinutes();
				let s = time.getSeconds();
				return y + '-' + this.addTimes(m) + '-' + this.addTimes(d) + ' ' + this.addTimes(h) + ':' + this.addTimes(
					mm) + ':' + this.addTimes(s);


			},
			addTimes(m) {
				return m < 10 ? '0' + m : m
			},
			itemChange(e) {
				console.log("e=" + JSON.stringify(e))
				let index = e.index;
				let show = e.show;
				// this.agentParams.transMonth = this.monthTransList[index].transDate;
				// this.$u.debounce(() => {
				// 	this.transStatByDate(1);
				// }, 100)

			},


		},
	}
</script>

<style scoped lang="scss">
	.trade {
		&__head {

			margin-left: 10rpx;
			margin-right: 10rpx;
			text-align: center;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 200rpx;
			background-image: url("/static/image/benefit/img_trade_query_bg.png");
			display: flex;
			flex-direction: column;
			justify-content: center;
			color: white;

		}

		&__money {
			font-size: 22px;
			margin-top: 20rpx;
			font-weight: bold;
		}

		&__tip {
			font-size: 11px;
			padding-left: 20rpx;
			padding-top: 20rpx;
			color: #999;
		}

		&__money-icon {
			display: inline-block;
			margin-right: 10rpx;
		}

		&__content {
			padding: 20rpx;
		}

		&__left-tab {
			display: flex;
			flex-direction: column !important;
			background-color: white;
			border-radius: 20rpx;
			padding: 0 20rpx;
			margin-right: 20rpx;
		}

		&__tab-item {
			height: 100rpx;
			line-height: 100rpx;
			flex-direction: row-reverse;

			&__text {

				width: 100rpx;
				text-align: right;
			}
		}

		&__right-content {
			background-color: white;
			border-radius: 20rpx;
			padding: 0 20rpx;


		}
	}
</style>